<template>
    <button @click="handleClick" :style="styles">
        <slot></slot>
    </button>
</template>
<script>
export default {
  props: {
    color: {
      type: String,
      default: "#00cc66"
    }
  },
  computed: {
    styles() {
      return {
        background: this.color
      };
    }
  },
  methods: {
    handleClick(e) {
      this.$emit("click", e);
    }
  }
};
</script>
<style scoped>
button {
  border: 0;
  outline: none;
  color: #fff;
  padding: 4px 8px;
}
button:active {
  position: relative;
  top: 1px;
  left: 1px;
}
</style>